<template>
  <div class="common-dialog">
    <el-dialog
      :title="title"
      width="35%"
      :model-value="props.modelValue"
      @update:modelValue="closeDialog"
    >
      <el-form label-width="80px" class="dialog-form" :model="formData">
        <el-form-item label="序号:">
          <el-input disabled v-model="formData.id" placeholder="系统生成"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称:">
          <el-input v-model="formData.name" placeholder="请输入品牌名称"></el-input>
        </el-form-item>

         <el-form-item label="logo:" prop="BrankImage">
          <el-upload
             v-model:file-list="BrankImageList"
            action="http://localhost:9093/file/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleHomeImageRemove"
            :on-success="handleHomeImageSuccess"
            :limit="1"
            :on-exceed="handleHomeImageExceed"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input
            v-model="formData.description"
            style="width: 500px"
            :autosize="{ minRows: 4, maxRows: 4 }"
            type="textarea"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBrank">添加</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="js" setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import instance from "@/utils/request";
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const title = ref(null);
const formData = ref({
  id: '',
  name: '',
  description: '',
  BrankImage: '',
});
// 接收父组件传递的值
const props = defineProps({
  modelValue: Boolean, // v-model 默认属性名
  //接收表格数据
  newFormData: Object,
});
const BrankImageList = ref([]);
// 定义向父组件发送的事件
const emit = defineEmits(["update:modelValue", "update"]);
watch(() => props.newFormData, (newValue) => {
  if (newValue) {
    formData.value = JSON.parse(JSON.stringify(newValue)); // 更新表单数据
    // 如果有图片URL，则更新文件列表以显示图片

    if (formData.value.logo) {
      BrankImageList.value = [{
        name: 'BrankImage',
        url: formData.value.logo
      }];
    } else {
      BrankImageList.value = [];
    }
  }
    // 根据是否有id来设置标题
  if (formData.value.id) {
    title.value = '修改品牌';
  } else {
    title.value = '添加品牌';
  }
}, { immediate: true });



// 图片预览处理
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

// 首页图片上传超出限制处理
const handleHomeImageExceed = () => {
  ElMessage.warning('首页商品图片只能上传一张！');
};
// 首页图片移除处理
const handleHomeImageRemove = () => {
  formData.value.homeImage = '';
  ElMessage.info('首页图片已移除');
};
// 首页图片上传成功处理
const handleHomeImageSuccess = (response) => {
  if (response && response.code === 200) {

    formData.value.BrankImage = response.data; // 假设后端返回的图片URL在data字段中

    ElMessage.success('首页图片上传成功');
  } else {
    ElMessage.error('首页图片上传失败');
  }
};

const saveBrank = async() => {
  if (formData.value.id === undefined || formData.value.id === '') {
    title.value = "添加品牌";
    // 添加分类
   const response = await instance.post('/brand/insert', {
      name: formData.value.name,
      logo: formData.value.BrankImage,
      description: formData.value.description,
   });
   if (response.data.code === 200) {
     ElMessage.success("添加成功！");
     emit("update", response.data);
   } else {
     ElMessage.error("添加失败！");
   }

  } else if (formData.value.id !== undefined && formData.value.id !== '') {
    title.value = '修改品牌';
    // 修改品牌
    const response = await instance.put('brand/update', {
      id: formData.value.id,
      name: formData.value.name,
      logo: formData.value.BrankImage,
      description: formData.value.description,
    });
    if (response.data.code === 200) {
      ElMessage.success("修改成功！");
      emit("update", response.data);
    } else {
      ElMessage.error("修改失败！");
    }
  } else if (formData.value.BrankName === "") {
    ElMessage.error("品牌名称不能为空！");
  }
};
// 关闭弹窗方法
const closeDialog = () => {
  emit("update:modelValue", false);
};
</script>
